
<template>
  <div class="app-container">
    <div class="cbox">
      <el-form
        :model="compForm"
        ref="compForm"
        size="mini"
        :rules="compFormRules"
        :inline="true"
      >
        <!-- <el-row> -->
          <!-- <el-col :span="4"> -->
            <el-form-item label="品种名称:" prop="varName">
              <el-input clearable maxlength="64" style="width:180px" v-model="compForm.varName"></el-input>
            </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="4"> -->
            <el-form-item label="品种代码:" prop="varCode">
              <el-input clearable maxlength="64" style="width:180px" v-model="compForm.varCode"></el-input>
            </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="2"> -->
            <el-form-item label-width="2rem">
              <el-button type="primary" @click="search()">查询</el-button>
            </el-form-item>
          <!-- </el-col> -->
        <!-- </el-row> -->
      </el-form>
    </div>
    <el-row :gutter="10" class="btn-area">
      <el-col :span="24">
        <buttonName @clickEvent="clickEventDom"></buttonName>
        <!-- <el-button size="mini" type="primary" plain v-if="isAuth('add')" @click="add">新增</el-button>
        <el-button size="mini" type="primary" plain v-if="isAuth('edit')" @click="edit">编辑</el-button>
        <el-button size="mini" type="primary" plain v-if="isAuth('del')" @click="del">删除</el-button>-->
      </el-col>
    </el-row>
    <div class="table">
      <div class="inner" ref="inner">
        <el-table
          :data="compList"
          :highlight-current-row="true"
          @row-click="getCurrentRow"
          @row-dblclick="storageDetail()"
          border
          :header-cell-style="{
            textAlign: 'center'
          }"
          :height="maxHeight"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            :index="indexMethod"
            show-overflow-tooltip
            width="60"
          ></el-table-column>

          <el-table-column
            align="center"
            label="品种代码"
            prop="varCode"
            show-overflow-tooltip
            width="180"
          ></el-table-column>
          <el-table-column align="center" label="品种名称" prop="varName" show-overflow-tooltip></el-table-column>
          <el-table-column
            align="center"
            label="是否默认"
            prop="varIsdefault"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.varIsdefault"
                true-label="Y"
                false-label="N"
                :key="scope.$index"
                disabled
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" label="是否有效" prop="varIsvalid" width="100">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.varIsvalid"
                true-label="Y"
                false-label="N"
                :key="scope.$index"
                disabled
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="创建人"
            prop="varInsertuser"
            show-overflow-tooltip
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            label="创建时间"
            prop="varInsertdt"
            show-overflow-tooltip
            width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            label="修改人"
            prop="varLstupduser"
            show-overflow-tooltip
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            label="修改时间"
            prop="varLstupddt"
            show-overflow-tooltip
            width="180"
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <el-pagination
      class="pagination"
      small
      background
      ref="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="Pagination.currentPage"
      :page-sizes="Pagination.pageSizeList"
      :page-size="Pagination.pageSize"
      :layout="Pagination.layout"
      :total="Pagination.total"
    ></el-pagination>

    <el-dialog
      v-el-drag-dialog
      ref="dialog"
      width="600px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      v-if="showDialog"
      :title="operate"
      :before-close="handleClose"
    >
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        label-width="13rem"
        size="mini"
        :rules="dialogFormRules"
      >
        <el-row>
          <el-col :span="18">
            <el-form-item label="品种代码：" prop="varCode">
              <el-input
                disabled
                minlength="1"
                maxlength="10"
                v-model.trim="dialogForm.varCode"
                @change="uppercase('varCode')"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="品种名称：" prop="varName">
              <el-input
                minlength="1"
                maxlength="10"
                v-model="dialogForm.varName"
                clearable
                :disabled="messageDisabled"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="是否默认：" prop="varIsdefault">
              <el-radio-group v-model.trim="dialogForm.varIsdefault" :disabled="messageDisabled">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="是否有效：" prop="varIsvalid">
              <el-radio-group v-model.trim="dialogForm.varIsvalid" :disabled="messageDisabled">
                <el-radio label="Y">是</el-radio>
                <el-radio label="N">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close('dialogForm')">关闭</el-button>
        <el-button size="mini" v-if="messageDisabled == false" @click="save" type="primary">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-el-drag-dialog
      ref="uploadDialog"
      width="30%"
      append-to-body
      :modal-append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showUpload"
      v-if="showUpload"
      :title="title"
      :before-close="uploadClose"
    >
      <div v-if="!pic">
        <el-upload
          action
          :http-request="uploadImage"
          :before-upload="beforeUpload"
          :show-file-list="false"
          class="upload-demo"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
        </el-upload>
      </div>
      <div class="pic" v-if="pic">
        <img :src="url" alt="查看图片" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="uploadClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createCode,
  XLSupplierCreation,
  getAuditUserToList1,
  addTmClientDetail1,
  editTmClientDetail1,
  deleteTmClientDetail1,
  addImg
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import paginationMixin from '@/mixins/pagination'
import buttonName from '@/components/buttonName/button-name.vue'
export default {
  name: 'router.custom',
  mixins: [resizeMixin, paginationMixin, isAuth],
  data() {
    return {
      registertype: {
        0: '门户注册',
        1: '后台注册',
        2: 'APP注册'
      },
      varcode: '',
      dialogFormStatus: '', //dialog 中 form 的状态 add/edit
      accountDisabled: true,
      messageDisabled: true,
      currentData: {},
      showDialog: false,
      showUpload: false,
      maxHeight: -1,
      operate: '',
      countryList: '',
      compForm: {
        cName: ''
      },
      flag: '',
      title: '上传',
      pic: false,

      url: '', //查看图片路径
      port: [],
      business: true,
      identityF: true,
      identityZ: true,
      compFormRules: {
        cName: []
      },
      dialogForm: {
        varName: '',
        varCode: '',
        varIsdefault: 'N',
        varIsvalid: 'Y'
      },
      dialogFormRules: {
        varCode: [
          {
            required: true,
            message: '产品大类代码不能为空',
            trigger: 'blur'
          }
        ],
        cltCliCode: [
          {
            required: true,
            message: '企业代码不能为空',
            trigger: 'blur'
          }
        ],
        cltName: [
          {
            required: true,
            message: '产品大类名称不能为空',
            trigger: 'blur'
          }
        ],
        varName: [
          {
            required: true,
            message: '产品大类名称不能为空',
            trigger: 'blur'
          }
        ],
        cltRegistorno: [
          {
            required: true,
            message: '工商登记号不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]{15}$/,
            message: '请输入15位工商登记号',
            trigger: 'blur'
          }
        ],
        cltCliCtctel: [
          {
            required: true,
            message: '企业电话不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]+$/,
            message: '请输入企业电话',
            trigger: 'blur'
          }
        ],
        cltVlflag: [
          {
            required: true,
            message: '有效标志不能为空',
            trigger: 'blur'
          }
        ],
        cltTypes: [
          {
            required: true,
            message: '客户类型不能为空',
            trigger: 'blur'
          }
        ],
        cltContact: [
          {
            required: true,
            message: '联系人不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4e00-\u9fa5|a-zA-Z]+$/,
            message: '请输入中文和英文',
            trigger: 'blur'
          }
        ],
        cltCtctel: [
          {
            required: true,
            message: '联系电话不能为空',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]+$/,
            message: '请输入联系电话',
            trigger: 'blur'
          }
        ],
        cltCliLegalname: [
          {
            required: true,
            message: '法人姓名不能为空',
            trigger: 'blur'
          }
        ],
        cltCliLegalphone: [
          { required: true, message: '法人联系电话不能为空', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '请输入手机号码', trigger: 'blur' }
        ],
        cltAccount: [
          {
            pattern: /^[0-9]+$/,
            message: '请输入数字',
            trigger: 'blur'
          }
        ],
        cltCliLegalid: [
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '请输入15位或18位身份证号',
            trigger: 'blur'
          },
          {
            required: true,
            message: '法人身份证号不能为空',
            trigger: 'blur'
          }
        ],
        cltCliAddress: [
          {
            required: true,
            message: '企业地址不能为空',
            trigger: 'blur'
          }
        ]
      },
      compList: []
    }
  },
  components: {
    buttonName
  },
  computed: {
    grandson() {
      var dataList = []
      var number
      var arr = this.$route.path.split('/')
      number = arr.length - 1
      dataList = this.$store.state.user.permList
      for (var i = 0; i < dataList.length; i++) {
        for (var f = 0; f < dataList[i].Children.length; f++) {
          if (dataList[i].Children[f].MDL_CODE == arr[number]) {
            return dataList[i].Children[f].Grandson
          }
        }
      }
      return []
    }
  },
  mounted() {
    this.refreshList()
    //下拉框
    // XLSupplierCreation().then(res=>{
    //   // console.log(res,639)
    //   this.port=res.data.FTKJWLHYPT
    // })
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  methods: {
    clickEventDom(item) {
      if (item.mdlCode === 'add') {
        this.add()
      } else if (item.mdlCode === 'edit') {
        this.edit()
      } else if (item.mdlCode === 'del') {
        this.del()
      }
    },
    //查看图片
    viewPic(str) {
      this.showUpload = true
      this.title = '查看'
      this.pic = true
      this.url = this.dialogForm[str]
      console.log(this.url)
    },
    // 上传图片
    uploadImage({ file }) {
      console.log(file, 2222)
      addImg(file).then(res => {
        if (res.success == '1') {
          if (this.flag == 0) {
            this.business = false
            this.dialogForm.cltCliTaxnoimage =
              window._$api.IMAGE_PREFIX + res.data.url
          } else if (this.flag == 1) {
            this.identityZ = false

            this.dialogForm.cltCliLegalimagep =
              window._$api.IMAGE_PREFIX + res.data.url
          } else {
            this.identityF = false

            this.dialogForm.cltCliLegalimageb =
              window._$api.IMAGE_PREFIX + res.data.url
          }
          this.$alert('图片上传成功！', '提示', {
            confirmButtonText: '确定'
          }).then(() => {
            this.uploadClose()
          })
        }
      })
    },
    // 图片上传之前的检查
    beforeUpload(file) {
      console.log(file, 5555)
      if (file.type.indexOf('image') === -1) {
        this.$message.error({
          message: '请上传正确的图片类型',
          showClose: true
        })
        return false
      }

      if (file.size / 1024 / 1024 > this.size) {
        this.$message.warning({
          message: '建议文件大小在5M以内',
          showClose: true
        })
        return false
      }
    },
    //上传
    UploadPic(str) {
      this.title = '上传'
      this.showUpload = true
      this.pic = false
      if (str == 'identityF') {
        this.flag = 2
      } else if (str == 'identityZ') {
        this.flag = 1
      } else {
        this.flag = 0
      }
    },
    //关闭上传窗口
    uploadClose() {
      this.showUpload = false
    },

    uppercase(key) {
      this.dialogForm[key] = this.dialogForm[key].toUpperCase()
    },
    trimECode() {
      this.dialogForm.cltEgsname = this.dialogForm.cltEgsname.trim()
    },
    // 获取客户列表
    search() {
      this.refreshList()
    },
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      getAuditUserToList1({
        varName: this.compForm.varName,
        varCode: this.compForm.varCode,
        PageIndexs: currentPage.toString(),
        PageSizes: pageSize.toString()
      }).then(response => {
        // if(response.success==1){
        this.compList = response.data
        updateTotal(Number(response.total))
      })
    },

    add() {
      let pre = 'PZ'
      createCode(pre).then(res => {
        let t = this
        t.dialogForm.varCode = res.msg
      })
      this.showDialog = true
      // $('#app',window.parent.document)

      this.operate = '新增品种信息'
      this.accountDisabled = false
      this.messageDisabled = false
      this.dialogFormStatus = 'add'

      this.dialogForm = {
        varName: '',
        varCode: '',
        varIsdefault: 'N',
        varIsvalid: 'Y'
      }
      // this.business=true
      // this.identityF=true
      // this.identityZ=true
    },
    edit() {
      this.dialogFormStatus = 'edit'
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.showDialog = true
      this.operate = '编辑品种信息'
      this.accountDisabled = true
      this.messageDisabled = false
      this.dialogForm = Object.assign({}, this.currentData)
    },
    del() {
      if (Object.keys(this.currentData).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('您确认要删除此数据吗?', '提示', {
        closeOnClickModal: false
      })
        .then(() => {
          // try{
          deleteTmClientDetail1(this.currentData.varId).then(() => {
            // if(response.success==1){
            this.$message.success({
              message: '删除成功！',
              showClose: true
            })
            this.refreshList()
          })
        })
        .catch(() => {})
    },
    save() {
      if (this.dialogFormStatus === 'add') {
        this.commitAdd('dialogForm')
      } else if (this.dialogFormStatus === 'edit') {
        this.commitEdit('dialogForm')
      }
    },
    commitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addTmClientDetail1(this.dialogForm).then(res => {
            // console.log(res)
            if (res.success == '1') {
              this.$message.success({
                message: '新增数据成功！',
                showClose: true
              })
              this.showDialog = false
              this.currentData = {}
              this.refreshList()
            }
          })
        }
      })
    },
    commitEdit(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.dialogForm)
        if (valid) {
          editTmClientDetail1(this.dialogForm).then(res => {
            if (res.success == '1') {
              this.$message.success({
                message: '编辑数据成功！',
                showClose: true
              })
              this.showDialog = false
              this.currentData = {}
              this.refreshList()
            }
          })
        }
      })
    },
    close(formName) {
      this.$refs[formName].clearValidate()

      this.showDialog = false
    },
    resetDialogForm() {
      return (this.dialogForm = {
        cltCode: '',
        cltName: '',
        fctFltId: '',
        cltEgsname: '',
        cltVlflag: 'Y',
        cltContact: '',
        cltCtctel: '',
        cltAccount: '',
        cltAddress: '',
        cltAgmclt: 'Y',
        cltCliCode: '',
        cltCliAddress: '',
        cltCliLegalname: '',
        cltTypes: [],
        cltShtname: '',
        cltPorts: '',
        cltRegistorno: '',
        cltCliLegalid: '',
        cltRemark: ''
      })
    },
    // 获取当前选中行
    getCurrentRow(row) {
      this.currentData = row
    },
    storageDetail() {
      this.showDialog = true
      this.operate = '查看客户信息'
      this.accountDisabled = true
      this.messageDisabled = true
      this.dialogForm = Object.assign({}, this.currentData)
    },
    handleClose(done) {
      if (this.$refs.dialogForm) {
        this.$refs.dialogForm.clearValidate()
        done()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.pic {
  width: 100%;
  // height:200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.btn {
  padding-bottom: 15px;
}
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  .table {
    flex: 1;
    position: relative;
    overflow: hidden;

    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
</style>
